How to use the YouTube embedded Video Player

 

YouTube Chromeless Player API

 

Chromeless player SWF URL:

http://gdata.youtube.com/apiplayer?key=DEV_KEY

note: it is using gdata.youtube.com and videoId is no longer part of the url as it was used in the javascript player api.

 

Functions

The following functions are available in addition to the ones listed in the JavaScript API section below:

loadVideoById(videoId:String, startSeconds:Number):Void

cueVideoById(videoId:String, startSeconds:Number):Void

setSize(width:Number, height:Number):Void

Sample Code: http://code.google.com/apis/youtube/chromeless_player_reference.html#Examples

YouTube JavaScript Player API

 

Embedding the YouTube player using SWFObject

We recommend using SWFObject to embed any players that will be accessed using the JavaScript API. This will allow you to detect the end user’s Flash Player version (the JavaScript API requires Flash Player 8 or higher), and also will get rid of the ‘Click to activate this control’ box when using Internet Explorer to view the player. To enabled the API in the SWF, you must pass in the parameter enablejsapi=1.

   Additional SWF Url Parameters that allows you to set things like color, border, autoplay, ‘Genie’ menu, related videos etc…

Getting the Player Reference

e.g. function onYouTubePlayerReady(playerId) { ytplayer = document.getElementById(“myytplayer”); }

Issuing Calls

e.g. function play() { if (ytplayer) { ytplayer.playVideo(); } } <a href=”javascript:void(0);” onclick=”play();”>Play</a>

Subscribing to Events

e.g.

function onYouTubePlayerReady(playerId) { ytplayer = document.getElementById(“myytplayer”); ytplayer.addEventListener(“onStateChange”, “onytplayerStateChange”); }

function onytplayerStateChange(newState) { alert(“Player’s new state: ” + newState); }

Functions and Events exposed by the Javascript Player API: http://code.google.com/apis/youtube/js_api_reference.html#Operations

Sample Code: http://code.google.com/apis/youtube/js_api_reference.html#Examples